<!DOCTYPE html>
<html>
<head>
    <title>Error SVG Test</title>
</head>
<body>
    <h1>Error SVG Test</h1>
    <div id="error-container"></div>

    <script>
        // 创建错误提示SVG的函数
        function createErrorSvg(errorMessage) {
            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            svg.setAttribute('width', '800px');
            svg.setAttribute('height', '600px');
            svg.setAttribute('viewBox', '0 0 800 600');
            svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');

            // 创建背景
            const background = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            background.setAttribute('x', '0');
            background.setAttribute('y', '0');
            background.setAttribute('width', '800');
            background.setAttribute('height', '600');
            background.setAttribute('fill', '#ffffff');
            svg.appendChild(background);

            // 创建蓝色警告三角形
            const triangle = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            triangle.setAttribute('d', 'M 300 200 L 450 200 L 375 350 Z');
            triangle.setAttribute('fill', '#2196F3');
            svg.appendChild(triangle);

            // 创建警告三角形内的感叹号
            const exclamationMark = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            exclamationMark.setAttribute('x', '375');
            exclamationMark.setAttribute('y', '280');
            exclamationMark.setAttribute('text-anchor', 'middle');
            exclamationMark.setAttribute('font-size', '48px');
            exclamationMark.setAttribute('fill', '#FFFFFF');
            exclamationMark.setAttribute('font-weight', 'bold');
            exclamationMark.textContent = '!';
            svg.appendChild(exclamationMark);

            // 创建平板设备
            const tablet = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            tablet.setAttribute('x', '400');
            tablet.setAttribute('y', '150');
            tablet.setAttribute('width', '250');
            tablet.setAttribute('height', '300');
            tablet.setAttribute('fill', '#FFFFFF');
            tablet.setAttribute('stroke', '#9E9E9E');
            tablet.setAttribute('stroke-width', '4');
            tablet.setAttribute('rx', '8');
            svg.appendChild(tablet);

            // 创建平板设备的阴影
            const tabletShadow = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            tabletShadow.setAttribute('x', '410');
            tabletShadow.setAttribute('y', '160');
            tabletShadow.setAttribute('width', '230');
            tabletShadow.setAttribute('height', '280');
            tabletShadow.setAttribute('fill', '#F5F5F5');
            svg.appendChild(tabletShadow);

            // 创建平板上的关闭按钮
            const closeBtn = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            closeBtn.setAttribute('x', '420');
            closeBtn.setAttribute('y', '170');
            closeBtn.setAttribute('width', '20');
            closeBtn.setAttribute('height', '20');
            closeBtn.setAttribute('fill', '#F44336');
            svg.appendChild(closeBtn);

            // 创建关闭按钮上的X
            const closeX1 = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            closeX1.setAttribute('x1', '422');
            closeX1.setAttribute('y1', '172');
            closeX1.setAttribute('x2', '438');
            closeX1.setAttribute('y2', '188');
            closeX1.setAttribute('stroke', '#FFFFFF');
            closeX1.setAttribute('stroke-width', '2');
            svg.appendChild(closeX1);

            const closeX2 = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            closeX2.setAttribute('x1', '438');
            closeX2.setAttribute('y1', '172');
            closeX2.setAttribute('x2', '422');
            closeX2.setAttribute('y2', '188');
            closeX2.setAttribute('stroke', '#FFFFFF');
            closeX2.setAttribute('stroke-width', '2');
            svg.appendChild(closeX2);

            // 创建平板内的柱状图
            const bar1 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            bar1.setAttribute('x', '450');
            bar1.setAttribute('y', '300');
            bar1.setAttribute('width', '20');
            bar1.setAttribute('height', '100');
            bar1.setAttribute('fill', '#4FC3F7');
            svg.appendChild(bar1);

            const bar2 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            bar2.setAttribute('x', '490');
            bar2.setAttribute('y', '250');
            bar2.setAttribute('width', '20');
            bar2.setAttribute('height', '150');
            bar2.setAttribute('fill', '#4FC3F7');
            svg.appendChild(bar2);

            const bar3 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            bar3.setAttribute('x', '530');
            bar3.setAttribute('y', '280');
            bar3.setAttribute('width', '20');
            bar3.setAttribute('height', '120');
            bar3.setAttribute('fill', '#4FC3F7');
            svg.appendChild(bar3);

            // 创建平板内的折线图
            const linePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            linePath.setAttribute('d', 'M 450 300 L 490 250 L 530 280');
            linePath.setAttribute('fill', 'none');
            linePath.setAttribute('stroke', '#FFC107');
            linePath.setAttribute('stroke-width', '3');
            svg.appendChild(linePath);

            // 创建折线图的点
            const point1 = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            point1.setAttribute('cx', '450');
            point1.setAttribute('cy', '300');
            point1.setAttribute('r', '4');
            point1.setAttribute('fill', '#FFC107');
            svg.appendChild(point1);

            const point2 = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            point2.setAttribute('cx', '490');
            point2.setAttribute('cy', '250');
            point2.setAttribute('r', '4');
            point2.setAttribute('fill', '#FFC107');
            svg.appendChild(point2);

            const point3 = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            point3.setAttribute('cx', '530');
            point3.setAttribute('cy', '280');
            point3.setAttribute('r', '4');
            point3.setAttribute('fill', '#FFC107');
            svg.appendChild(point3);

            // 创建错误提示文字
            const errorText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            errorText.setAttribute('x', '400');
            errorText.setAttribute('y', '480');
            errorText.setAttribute('text-anchor', 'middle');
            errorText.setAttribute('font-size', '16px');
            errorText.setAttribute('fill', '#757575');
            errorText.textContent = `当前预览工具，不支持${errorMessage}格式的图片直接渲染；`;
            svg.appendChild(errorText);

            // 创建第二行提示文字
            const errorText2 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            errorText2.setAttribute('x', '400');
            errorText2.setAttribute('y', '500');
            errorText2.setAttribute('text-anchor', 'middle');
            errorText2.setAttribute('font-size', '16px');
            errorText2.setAttribute('fill', '#757575');
            errorText2.textContent = '请点击上方预览，或者下载后在本地预览。';
            svg.appendChild(errorText2);

            // 创建预览图标
            const previewIcon = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            previewIcon.setAttribute('x', '380');
            previewIcon.setAttribute('y', '520');
            previewIcon.setAttribute('width', '32');
            previewIcon.setAttribute('height', '32');
            previewIcon.setAttribute('fill', '#E0E0E0');
            svg.appendChild(previewIcon);

            // 创建预览图标内的相机图案
            const camera = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            camera.setAttribute('cx', '396');
            camera.setAttribute('cy', '536');
            camera.setAttribute('r', '8');
            camera.setAttribute('fill', '#757575');
            svg.appendChild(camera);

            const cameraLens = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            cameraLens.setAttribute('cx', '396');
            cameraLens.setAttribute('cy', '536');
            cameraLens.setAttribute('r', '4');
            cameraLens.setAttribute('fill', '#BDBDBD');
            svg.appendChild(cameraLens);

            // 创建预览文字
            const previewText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            previewText.setAttribute('x', '420');
            previewText.setAttribute('y', '545');
            previewText.setAttribute('font-size', '14px');
            previewText.setAttribute('fill', '#757575');
            previewText.textContent = '预览';
            svg.appendChild(previewText);

            return svg;
        }

        // 测试不同错误类型
        const testCases = ['PNG', 'JPEG', 'BMP', 'GIF', 'TIFF'];
        const container = document.getElementById('error-container');

        testCases.forEach((errorType, index) => {
            const errorSvg = createErrorSvg(errorType);
            // 为不同测试用例添加间距
            errorSvg.style.margin = '20px';
            errorSvg.style.border = '1px solid #eee';
            container.appendChild(errorSvg);
        });
    </script>
</body>
</html>